
<!DOCTYPE html>

<html class="no-js no-scroll" lang="">
	
	<head>
		
		<title>Shot</title>
		
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		
		<meta name="description" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>

		<meta name="navbar-bg-color" content="#eaeaea"/>
		<meta name="navbar-tint-color" content="#333"/>
		<meta name="navbar-text-color" content="#333"/>

		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/main.css"/>

	</head>

	<body>

		<RefreshCollectionView id="list" name="shot" class="list" columns="1" is-vertical>

			<UICollectionViewCell name="author" is-static is-row>
				<div class="author-wrapper" onclick="@selector(viewProfile:)">
					<img class="author-avatar" name="avatar"/>
					<div class="author-attribution">
						<div class="author-title" name="title">Portfolio concept</div>
						<div class="author-subtitle" name="name">Vadim Sherbakov</div>
					</div>
				</div>
			</UICollectionViewCell>

			<UICollectionViewCell name="shot" is-static is-row>
				<div class="shot-wrapper">
					<img name="img" class="shot-img" src="http://img.hb.aicdn.com/90b96d207b752453ca2cef1d29af382637342086f507-9rHNhW_fw658"
					 onclick="@selector(viewPhoto:)" />
				</div>
			</UICollectionViewCell>

			<UICollectionViewCell name="attr" is-static is-row stick-top>
				<div class="shot-attribution-wrapper">
					<div class="shot-attribution">
						<div class="shot-segment">
							<div class="shot-segment-wrapper">
								<!-- <img class="shot-segment-icon" src="icon-views.png"/> -->
								<span class="shot-segment-count" name="views">6770</span>
								<span class="shot-segment-suffix">Views</span>
							</div>
						</div>
						<div class="shot-segment">
							<div class="shot-segment-wrapper">
								<!-- <img class="shot-segment-icon" src="icon-views.png"/> -->
								<span class="shot-segment-count" name="comments">19</span>
								<span class="shot-segment-suffix">Comments</span>
							</div>
						</div>
						<div class="shot-segment">
							<div class="shot-segment-wrapper">
								<!-- <img class="shot-segment-icon" src="icon-views.png"/> -->
								<span class="shot-segment-count" name="likes">591</span>
								<span class="shot-segment-suffix">Likes</span>
							</div>
						</div>
					</div>
				</div>
			</UICollectionViewCell>

			<UICollectionViewCell name="comments" is-row>
				<div class="comment-cell" onclick="@selector(viewComments:)">
					<img class="comment-avatar-img" name="avatar"/>
					<div class="comment-attribution">
						<p class="comment-name" name="name">Eddy Gann</p>
						<p class="comment-body" name="text">Just a suggestion for a feature that means a lot to me: In-app web browser (so we can add the shot to buckets and like it.) Just adding a button to show it as it would appear in a mobile browser so we have access to the like button.</p>
					</div>
				</div>
			</UICollectionViewCell>

		</RefreshCollectionView>

		<style>
			
			body {
				width: 100%;
				height: 100%;
			}

			.list {
				display: block;
				width: 100%;
				height: 100%;
				background-color: #eaeaea;
			}

			.author-wrapper {
				display: block;
				margin: 0 auto;
				margin-top: 8px;
				width: 96%;
				height: 54px;
			}
				
			.author-avatar {
				display: inline-block;
				width: 54px;
				height: 54px;
				border-radius: 29px;
				border-style: solid;
				border-width: 2px;
				border-color: white;
				background-color: #999;
			}
			
			.author-attribution {
				display: inline-block;
				margin-top: 6px;
				margin-left: 12px;
				width: auto;
				height: 44px;
			}
			
			.author-title {
				display: block;
				width: auto;
				height: 50%;
				line-height: 16px;
				color: #333;
				text-align: left;
				font-size: 16px;
				font-weight: lighter;
			}
			
			.author-subtitle {
				display: block;
				width: auto;
				height: 50%;
				line-height: 22px;
				color: #333;
				text-align: left;
				font-size: 14px;
				font-weight: lighter;
			}
	
			.shot-wrapper {
				display: block;
				width: 100%;
				height: auto;
				margin-bottom: 2px;
			}

			.shot-img {
				display: block;
				width: 100%;
				height: equals(width);
				margin: 4px;
				background-color: #eee;
				border-radius: 2px;
				border-style: solid;
				border-width: 2px;
				border-color: white;
				content-mode: fill;
			}
		
			.shot-attribution-wrapper {
				display: block;
				width: 100%;
				height: auto;
				margin-bottom: 5px;
			}

			.shot-attribution {
				display: block;
				width: 100%;
				height: 34px;
				background-color: white;
			}

			.shot-segment {
				display: inline-block;
				width: 33.3%;
				height: 100%;
			}
		
			.shot-segment-wrapper {
				display: block;
				margin-left: auto;
				margin-right: auto;
				width: auto;
				height: 100%;
			}

			.shot-segment-icon {
				display: inline-block;
				margin-top: 6px;
				width: 18px;
				height: 18px;
				content-mode: center;
			}

			.shot-segment-count {
				display: inline-block;
				margin-left: 4px;
				width: auto;
				height: 100%;
				line-height: 34px;
				color: #333;
				text-align: center;
				font-size: 14px;
				font-weight: lighter;
			}

			.shot-segment-suffix {
				display: inline-block;
				margin-left: 4px;
				width: auto;
				height: 100%;
				line-height: 34px;
				color: rgba( 51, 51, 51, 0.6 );
				text-align: center;
				font-size: 12px;
				font-weight: lighter;
			}

			.comment-cell {
				display: block;
				width: 100%;
				height: auto;
			}
		
			.comment-avatar-img {
				display: inline-block;
				margin-top: 4px;
				margin-left: 12px;
				width: 30%;
				max-width: 32px;
				height: 32px;
				border-radius: 18px;
				border-style: solid;
				border-width: 2px;
				border-color: #f0f0f0;
				background-color: #999;
			}

			.comment-attribution {
				display: inline-block;
				margin-left: 12px;
				margin-top: 4px;
				margin-bottom: 10px;
				width: 70%;
				height: auto;
			}

			.comment-name {
				font-weight: lighter;
				font-size: 14px;
				color: rgba( 51, 51, 51, 0.5 );
			}

			.comment-body {
				width: 100%;
				height: auto;
				font-size: 14px;
				color: #333;
			}

		</style>
		
	</body>
	
</html>
